<template>
  <div class="data">
    <div class="info">
      <div class="nickname">{{ parentData.user.nickname }}</div>
      <div class="time">2020-01-01</div>
      <div class="huifu">回复</div>
    </div>
    <Parent :parentData="parentData.parent" v-if="parentData.parent"></Parent>
    <div class="big">{{ parentData.content }}</div>
  </div>
</template>

<script>
export default {
  // <!-- 递归是自己调用自己，有name值 -->
  // 需要有结束值
  name: "Parent",
  props: ["parentData"],
};
</script>

<style lang="less" scoped>
.big {
  font-size: 14px;
  color: #ccc;
}
.data {
  padding: 2/360 * 100vw;
  border: violet solid 2px;
  .info {
    display: flex;
    align-items: center;
    color: skyblue;
    padding-bottom: 3/360 * 100vw;
    .nickname {
      padding-right: 5/360 * 100vw;
      font-size: 16/360 * 100vw;
    }
    .time {
      flex: 1;
      font-size: 12/360 * 100vw;
    }
    .huifu {
      padding-right: 3/360 * 100vw;
      font-size: 14/360 * 100vw;
    }
  }
}
</style>